<template>
	<view class="market" :style="{ paddingTop: statusBarHeight + 'px' }">
		<view class="header">
				<view class="nav mr" :class="{'act':active==1}" @tap="navTab(1)">
					闪兑&跨链
				</view>
				<view class="nav" :class="{'act':active==2}" @tap="navTab(2)">
					行情
				</view>
		</view>
		<view class="contentBox">
			<view class="empty">
				<view class="iconBox">
					<image src="../../static/images/market/empty.png" mode="widthFix" class="icon"></image>
				</view>
				<view class="text">
					该功能不支持在当前地区使用
				</view>
				<view class="btn_box">
					<view class="btn">
						了解详情
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active:1,
				statusBarHeight:0,
			}
		},
		created() {
		   // 获取系统信息
		   uni.getSystemInfo({
		     success: (res) => {
		       this.statusBarHeight = res.statusBarHeight; // 设置状态栏高度
		     }
		   });
		 },
		methods: {
			navTab(type){
				this.active=type
			}
		}
	}
</script>

<style scoped lang="scss">
.market{
	font-weight: 400;
	height: 100%;
	display: flex;
	flex-direction: column;
	.header{
		width: 100%;
		height: 80upx;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #B4B5B5;
		font-size: 36upx;
		.mr{
			margin-right: 44upx;
		}
		.act{
			color: #000000;
		}
	}
	.contentBox{
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.empty{
			.iconBox{
				display: flex;
				justify-content: center;
				.icon{
					width: 248upx;
					height: 208upx;
				}
			}
			.text{
				text-align: center;
				color: #979797;
				font-size: 24upx;
				margin-top: 32upx;
			}
			.btn_box{
				width: 204upx;
				text-align: center;
				background: #ECF4FF;
				border-radius: 10upx;
				line-height: 62upx;
				margin:32upx auto ;
				color: #5092E2;
				font-size: 24upx
			}
		}
	}
}
</style>
